<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>笔记详情</title>
    <link rel="shortcut icon" href="../static/image/favicon.ico" th:href="@{/image/favicon.ico}"/>
    <link rel="stylesheet" href="../static/css/semantic.min.css" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" href="../static/css/icon.min.css" th:href="@{/css/icon.min.css}">
    <link rel="stylesheet" href="../static/css/mine.css" th:href="@{/css/mine.css}">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
</head>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
<script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
<script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
<script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js"
        th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
<body>
<!--导航 -->
<nav th:replace="_fragments::menu(1)">
</nav>
<!-- 中间内容 -->
<div id="waypoint" class="mine-container-small mine-padded-tb-large">
    <div class="ui container">
        <div class="ui top attached segment">
            <div class="ui horizontal link list">
                <div class="item">
                    <img src="#" th:src="@{${blog.avatar}}" alt="" class="ui avatar image">
                    <div class="content"><a href="#" class="header"><span th:text="${blog.username}">李晓坤</span></a>
                    </div>
                </div>
                <div class="item">
                    <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-06-09</span>
                </div>
                <div class="item">
                    <i class="eye icon"></i><span th:text="${blog.viewCount}">1000000</span>
                </div>
            </div>
        </div>
        <div class="ui attached segment">
            <img th:src="@{${blog.firstPicInfo}}" src="#" alt="" class="ui fluid image rounded">
        </div>
        <div class="ui attached segment">
            <div class="ui right aligned basic segment">
                <div class="ui orange basic label" th:if="${blog.blogType}==0">原创</div>
                <div class="ui orange basic label" th:if="${blog.blogType}==1">翻译</div>
                <div class="ui orange basic label" th:if="${blog.blogType}==2">转载</div>
            </div>
            <h2 class="ui aligned center header" th:utext="${blog.title}">一路有你相伴</h2>
            <div id="content" class="typo typo-selection js-toc-content mine-padded-lr-responsive mine-padded-tb-large"
                 th:utext="${blog.content}">


            </div>
            <!-- 类别 -->
            <div class="mine-padded-lr-responsive">
                <div class="ui basic teal left pointing label" th:text="${blog.typeName}">方法论</div>
            </div>
            <div class="ui horizontal divider">end</div>
            <!-- 赞赏 -->
            <div class="ui center aligned basic segment" th:if="${blog.appreciation}==1">
                <button id="payButton" class="ui orange basic circular button">赞赏</button>
            </div>
            <div class="ui payQ flowing popup top left transition hidden">
                <div class="ui orange basic label">
                    <div class="ui images" style="font-size: inherit !important;">
                        <div class="image">
                            <img src="../static/image/ali-pay.png" th:src="@{/image/ali-pay.png}" alt=""
                                 class="ui rounded bordered image" style="width:100px">
                            <div>支付宝</div>
                        </div>
                        <div class="image">
                            <img src="../static/image/wechat-pay.png" th:src="@{/image/wechat-pay.png}" alt=""
                                 class="ui rounded bordered image" style="width:100px">
                            <div>微信</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui attached positive message" th:if="${blog.shareStatement}==1">
            <!--博客信息 -->
            <div class="ui middle aligned grid">
                <div class="eleven wide column">
                    <ui class="list">
                        <li>作者：<span th:text="${blog.username}">李晓坤</span></li>
                        <li>发表时间：<span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-06-09</span></li>
                        <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                        <li>公众号转载：请在文末添加作者公众号二维码</li>
                    </ui>
                </div>
                <div class="five wide column">
                    <img src="../static/image/gzh.jpg" th:src="@{/image/gzh.jpg}" alt=""
                         class="ui right floated rounded bordered image" style="width:100px"/>
                </div>
            </div>
        </div>
        <div id="comment-container" th:fragment="comment-container" class="ui bottom attached segment"
             th:if="${blog.comented}==1">
            <!-- 留言区域 -->
            <div class="ui teal segment" th:if="!${#lists.isEmpty(comments)}">
                <div class="ui form">
                    <div class="ui comments">
                        <h3 class="ui dividing header">Comments</h3>
                        <div th:replace="_fragments::comment(${comments})" class="comment">
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui form" id="comment-area">
                <input type="hidden" name="toname">
                <input type="hidden" name="commentId">
                <input type="hidden" name="blogId" th:value="${blogId}">
                <div class="field">
                    <textarea name="comment-content" placeholder="请输入评论信息..."></textarea>
                </div>
                <div class="fields">
                    <div class="field mine-mobile-wide mine-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="nickname" placeholder="请输入您的姓名">
                        </div>
                    </div>
                    <div class="field mine-mobile-wide mine-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="mail icon"></i>
                            <input type="text" name="email" placeholder="您的邮箱，方便通知您">
                        </div>
                    </div>
                    <div class="field mine-mobile-wide mine-margin-bottom-small">
                        <button id="comment-btn" onclick="submitComment()" class="ui teal button mine-mobile-wide"><i
                                class="edit icon"></i>发布
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="help-bar" class="mine-padded mine-fixed mine-right-bottom" style="display: none">
    <div class="ui vertical icon buttons">
        <button type="button" class="ui toc teal button">目录</button>
        <a href="#comment-container" class="ui teal button" th:if="${blog.comented}==1">留言</a>
        <button class="ui wechat teal button"><i class="weixin icon"></i></button>
        <div id="toTop-button" href="#" class="ui icon button"><i class="chevron up icon"></i></div>
    </div>
</div>

<div class="ui toc-container flowing popup transition hidden" style="width:260px">
    <ol class="js-toc"></ol>
</div>

<div id="qrcode" class="ui wechat-qr flowing popup transition hidden mine-padded-mini" style="width:130px !important;">
</div>

<!-- 底部 -->
<footer th:replace="_fragments::footer">
</footer>
<script>

    function setTo(ob) {
        $("[name='comment-content']").attr("placeholder", "to " + $(ob).data("toname"));
        $("[name='toname']").val($(ob).data("toname"));
        $("[name='commentId']").val($(ob).data("commentid"));
    }

    function submitComment() {
        var content = $("[name='comment-content']").val();
        var nickName = $("[name='nickname']").val();
        var email = $("[name='email']").val();
        if (content == "" || nickName == "" || email == "") {
            alert("评论内容、用户名、邮箱不能为空!!");
            return;
        }
        if (nickName.length > 10 || email.length > 30) {
            alert("昵称或邮箱过长");
            return;
        }
        if (content.length > 250) {
            alert("评论内容过长!!");
            return;
        }
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if (!reg.test(email)) {
            alert("邮箱格式不正确!!");
            return;
        }
        $("#comment-container").load("/comment", {
            blogId: $("[name='blogId']").val(),
            commentId: $("[name='commentId']").val(),
            toname: $("[name='toname']").val(),
            comment: $("[name='comment-content']").val(),
            nickname: $("[name='nickname']").val(),
            email: $("[name='email']").val(),
        });
    }

    var url = window.location.href;
    var qrcode = new QRCode("qrcode", {
        text: url,
        width: 128,
        height: 128,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });

    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
        // For headings inside relative or absolute positioned containers within content.
        hasInnerContainers: true,
    });

    $('#payButton').popup({
        popup: $('.payQ.popup'),
        on: 'hover',
        position: 'bottom center'
    });

    $('.toc.button').popup({
        popup: $('.toc-container.popup'),
        on: 'click',
        position: 'top center'
    });

    $('.wechat').popup({
        popup: $('.wechat-qr'),
        on: 'hover',
        position: 'left center'
    });
    $('#toTop-button').click(function () {
        $(window).scrollTo(0, 1000);
    });

    var waypoint = new Waypoint({
        element: document.getElementById('waypoint'),
        handler: function (direction) {
            if (direction == 'up') {
                $('#help-bar').hide(500)
            } else {
                $('#help-bar').show(100);
            }
        }
    })
</script>
</body>
</html>